<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>FileReader</title>
    <link rel="stylesheet" href="images/style.css">
    <script type="text/javascript" src="images/jquery.js"></script>

</head>
<body>

<div class="wrap">
    <div class="head">
        <h1>
            <a href="http://2kid.org" title="2Kid">2Kid </a>
        </h1>

        <h2>关注web、关注前端</h2>
    </div>
    <div class="banner">
        <h3>FileReader API</h3>
    </div>
    <div class="content dometop">
        <div class="box domepage">
            <h4>示例</h4>

            <p>选择图片或是文本文件，可多选。 </p>

            <div class="cont">
                <input type="file" id="inputs" multiple="multiple">

                <div id="result"></div>
                <script type="text/javascript">
                    (function() {


                        var inputElement = document.getElementById("inputs");
                        inputElement.addEventListener("change", handleFiles, false);
                        function handleFiles(e) {
                            if (typeof FileReader == 'undefined') {
                                alert('你的浏览器不支持！');
                                return;
                            }
                            var fileList = e.target.files;
                            var oresult = document.getElementById('result');
                            for (var i = 0; i < fileList.length; i++) {
                                var file = fileList[i];
                                var imageType = /image.*/,textType = /text.*/;

                                if (file.type.match(imageType)) {
                                    var reader = new FileReader();
                                    reader.readAsDataURL(file);
                                    reader.onload = function(e) {
                                        var img = document.createElement('img');
                                        img.src = e.target.result;
                                        oresult.appendChild(img);
                                    }
                                } else if (file.type.match(textType)) {
                                    var reader = new FileReader();
                                    reader.readAsText(file, 'utf-8');
                                    reader.onload = function(e) {
                                        var sp = document.createElement('span');
                                        sp.innerHTML = e.target.result;
                                        oresult.appendChild(sp);
                                    }
                                }


                            }
                        }
                    })();

                </script>


            </div>
        </div>
        <div class="box domelist">
            <h4>dome列表</h4>

            <div class="cont">
                <ul>
                    <li><a href="FileReader.html">FileReader</a></li>
                    <li><a href="CSSsprites.html">CSS sprites在线javascript版</a></li>
                </ul>
            </div>
        </div>
        <div class="box codepage">
            <h4>代码</h4>

            <pre class="cont">
&lt;input type="file" id="inputs" multiple="multiple"&gt;

&lt;div id="result"&gt;&lt;/div&gt;
&lt;script type="text/javascript"&gt;

    var inputElement = document.getElementById("inputs");
    inputElement.addEventListener("change", handleFiles, false);

    function handleFiles(e) {
        if (typeof FileReader == 'undefined') {
            alert('你的浏览器不支持！');
            return;
        }
        var fileList = e.target.files;
        var oresult=document.getElementById('result');
        for (var i = 0; i &lt; fileList.length; i++) {
            var file = fileList[i];
            var imageType = /image.*/,textType = /text.*/;

            if (file.type.match(imageType)) {
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function(e) {
                    var img = document.createElement('img');
                    img.src = e.target.result;
                    oresult.appendChild(img);
                }
            }else if(file.type.match(textType)){
                var reader = new FileReader();
                reader.readAsText(file,'utf-8');
                reader.onload = function(e) {
                    var sp=document.createElement('span');
                    sp.innerHTML=e.target.result;
                    oresult.appendChild(sp);
                }
            }


        }
    }

&lt;/script&gt;


            </pre>
        </div>

    </div>
    <div class="foot">
        Copyright © 2011 <strong>2Kid</strong> |
        Powered by <a target="bank" href="http://wordpress.org/">WordPress</a> |
        Theme by <a target="bank" href="http://2kid.org">2Kid</a>
    </div>
</div>
<script type="text/javascript" src="images/dome.js"></script>
</body>
</html>
